<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt maiores quidem quasi quisquam facere dolore nisi repudiandae corrupti nam eum ab obcaecati sunt, molestiae beatae deserunt culpa labore laudantium! Iusto!</p>
		<div style="width: 100px; height: 100px; background: #000;"></div>
		<span>文本</span>
		<br >
		<input type="button" value="按钮2">
		<input type="text" >
		<script>
			/*   javaScript：基础语法+  DOM(页面)+BOM(浏览器)
			     JQuery操作DOM方式【7方式 36函数】---改变页面效果
				 1.元素内容操作：操作元素和元素内容的方式【3个函数】
				 .html()
				 .val()
				 .text()
				 2.元素属性操作：操作元素的属性【固定属性、附加属性】【4个函数】
				 .attr()
				 .removeAttr()
				 .prop()
				 .removeprop()
				 3.元素样式操作：【4个函数】
				 addClass()
				 removeClass()
				 toggleClass()
				 hasClass()
				 4.元素样式【位置】操作：【5个函数】
				 css()
				 width()和height()
				 outerWidth()和outerHeight()
				 
				 5.元素删除和插入操作：【7个函数】
				 append()和prepend()
				 after()和before()
				 remove()和empty()
				 replaceWith()
				 6.元素遍历操作：【6个函数】
				 children()和parent()
				 siblings()
				 next()和prev()
				 each()
				 7.动画操作：【7个函数】
				 show()和hide()
				 slideDown()和slideUp()
				 fodeIn()和fadeOut()
				 hover()
			*/
			
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出效果");
			});
			
			$("div").mouseenter(function(){
				$("span").html("<a href='#'>超文本</a>");
			});
			/* Jquery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
			 .html()函数  增加一个元素，覆盖原来的html
			.val()函数    input元素使用，改变修改表单元素中文本
			 */
			/* $('button').click(function(){
				//DOM操作--改变p元素的内容
				//DOM操作--改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯......</marquee>");
			}); */
			/* 练习：100*100框 div 鼠标移动上去，文本改成超文本
			         按钮和输入框，点击按钮，输入框输出文字效果*/
			/* $('div').mouseenter(function(){
				document.write("鼠标移入了");
			}); */
		</script>
	</body>
</html>